<template>
  <div class="page-container">
    <div class="page-header">
      <h2 class="page-title">学校信息管理</h2>
      <div class="page-actions">
        <Button type="primary" @click="handleAdd" size="large">
          <plus-outlined />
          新增学校
        </Button>
        <Button @click="openImport" size="large">
          <upload-outlined />
          批量导入
        </Button>
      </div>
    </div>

    <Card class="filter-card">
      <SchoolFilter
        :initialQuery="queryParams"
        @search="handleSearch"
        @reset="handleReset"
      />
    </Card>

    <Card class="data-card">
      <Spin :spinning="loading">
        <SchoolTable
          :schools="schools"
          :loading="loading"
          :pagination="pagination"
          @refresh="getList"
          @pageChange="handlePageChange"
        />
      </Spin>
    </Card>

    <ImportExcel
      :visible="importVisible"
      @close="closeImport"
      @import="handleImport"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Card, Button, message, Spin } from "ant-design-vue";
import { PlusOutlined, UploadOutlined } from "@ant-design/icons-vue";
import SchoolTable from "../components/SchoolTable.vue";
import SchoolFilter from "../components/SchoolFilter.vue";
import ImportExcel from "../components/ImportExcel.vue";
import { schoolApi } from "../api/schoolApi";
import type { School, SchoolQuery } from "../types/school";
import Api from "@/api/school.js";
import city from "@/area/city.json";

const router = useRouter();

// 学校数据
const schools = ref<School[]>([]);

// 加载状态
const loading = ref(false);

// 分页信息
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showTotal: (total: number) => `共 ${total} 条记录`,
});

// 查询条件
const queryParams = reactive<any>({
  dsCode: localStorage.getItem("dsCode") || "3301",
  ds: city.find((e) => e.code === localStorage.getItem("dsCode"))?.name,
  pageNum: 1,
  pageSize: 10,
});

// 获取学校列表
const getList = async () => {
  loading.value = true;

  const params = {
    dsCode: queryParams.dsCode,
    ds: queryParams.ds,
    qx: queryParams.qx,
    xxlx: queryParams.xxlx,
    xxmc: queryParams.xxmc,
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
  };
  console.log(params);
  try {
    const res: any = await Api.getList(params);
    schools.value = res.content;
    pagination.total = res.totalPages;
    // schools.value = mockSchools;
  } catch (error) {
    // 请求失败或超时，使用模拟数据
    schools.value = [];
    pagination.total = 0;
  } finally {
    loading.value = false;
  }
};

// 处理搜索
const handleSearch = (values: SchoolQuery) => {
  Object.assign(queryParams, values);
  pagination.current = 1;
  getList();
};

// 处理重置
const handleReset = (values: SchoolQuery) => {
  Object.assign(queryParams, values);
  pagination.current = 1;
  pagination.pageSize = 10;
  getList();
};

// 处理分页变化
const handlePageChange = (pager: any) => {
  pagination.current = pager.current;
  pagination.pageSize = pager.pageSize;
  getList();
};

// 新增学校
const handleAdd = () => {
  router.push("/schools/add");
};

// 导入学校弹窗控制
const importVisible = ref(false);

// 打开导入弹窗
const openImport = () => {
  importVisible.value = true;
};

// 关闭导入弹窗
const closeImport = () => {
  importVisible.value = false;
};

// 处理导入学校
const handleImport = () => {
  getList(); // 刷新列表
};

// 模拟数据
const mockSchools: School[] = [
  {
    id: "mock1",
    xxmc: "杭州市西湖区实验小学",
    dz: "杭州市西湖区文三路100号",
    lxdh: "0571-88888888",
    ds: "杭州市",
    dsCode: "3301",
    qx: "西湖区",
    jd: "文教路街道",
    sq: "紫荆花社区",
    xxlx: "小学",
    jd1: 120.15,
    wd: 30.28,
    xsrsgm: "1200",
    sxgfsd: "07:30-08:30",
    xxgfsd: "16:00-17:00",
    jsgklb: "校内接送点管理",
    isComplete: true,
    zrzd: "西湖中队",
    zdfzr: "张三",
    fzrlxdh: "13800138000",
    sfsczxgkfa: "1",
  },
  {
    id: "mock2",
    xxmc: "杭州市拱墅区大关中学",
    dz: "杭州市拱墅区大关路58号",
    lxdh: "0571-87654321",
    ds: "杭州市",
    dsCode: "3301",
    qx: "拱墅区",
    jd: "大关街道",
    sq: "大关社区",
    xxlx: "初中",
    jd1: 120.16,
    wd: 30.31,
    xsrsgm: "900",
    sxgfsd: "7:00-8:00",
    xxgfsd: "16:30-17:30",
    jsgklb: "路侧临时停车管理",
    isComplete: true,
    zrzd: "拱墅中队",
    zdfzr: "李四",
    fzrlxdh: "13900139000",
    sfsczxgkfa: "1",
  },
  {
    id: "mock3",
    xxmc: "杭州第四中学",
    dz: "杭州市江干区采荷路220号",
    lxdh: "0571-86543210",
    ds: "杭州市",
    dsCode: "3301",
    qx: "江干区",
    jd: "采荷街道",
    sq: "采荷社区",
    xxlx: "高中",
    jd1: 120.21,
    wd: 30.26,
    xsrsgm: "2000",
    sxgfsd: "6:50-7:50",
    xxgfsd: "17:00-18:00",
    jsgklb: "地下接送管理",
    isComplete: false,
    zrzd: "江干中队",
    zdfzr: "王五",
    fzrlxdh: "13700137000",
    sfsczxgkfa: "0",
  },
  {
    id: "mock4",
    xxmc: "浙江省杭州高级中学",
    dz: "杭州市西湖区转塘街道象山路10号",
    lxdh: "0571-85123456",
    ds: "杭州市",
    dsCode: "3301",
    qx: "西湖区",
    jd: "转塘街道",
    sq: "象山社区",
    xxlx: "高中",
    jd1: 120.07,
    wd: 30.16,
    xsrsgm: "3000",
    sxgfsd: "6:30-7:30",
    xxgfsd: "17:30-18:30",
    jsgklb: "固定场所硬隔离封闭",
    isComplete: true,
    zrzd: "西湖中队",
    zdfzr: "赵六",
    fzrlxdh: "13600136000",
    sfsczxgkfa: "1",
  },
];

// 在组件挂载时加载数据
onMounted(() => {
  getList();
});
</script>

<style scoped>
.page-container {
  height: calc(100vh - 206px);
  display: flex;
  flex-direction: column;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.page-actions {
  display: flex;
  gap: 16px;
}

.page-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
}

.page-actions button .anticon {
  margin-right: 8px;
  font-size: 16px;
}

.filter-card {
  margin-bottom: 24px;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.data-card {
  flex: 1;
  /* margin-bottom: 28px; */
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
</style>
